<script setup lang="ts">
    import { Session } from '@/utils/storage';
    import request from "@/utils/request";
    import { uploadImg } from '@/api/common/media';
    import base from "@/utils/base";
    import { defineAsyncComponent,reactive,ref,toRefs,nextTick } from 'vue';
    import {notify,confirm} from '@/utils/element';
    import {useRoute,useRouter} from 'vue-router'
    import {geren} from '@/utils/menu';
    const router = useRouter();
    const menus=geren.list();
    // console.log("个人菜单",menus)
    const grmenu=[];
    const grmenuesc=[];
 menus.forEach((item)=>{
          item.ykMenu.forEach((i)=>{
            // console.log("个人中心",i.child);
            i.child.forEach((a)=>{
                // console.log(a.tableName)
                grmenuesc.push(a.tableName);
            })
             grmenu.push(i.menu)
          });
     })
                            const state=reactive({
                gr:grmenu,
        gresc:grmenuesc,
                                                                                                                                            yonghuxingbieOptions:[],
                                                        ruleForm: {

        },
        formInline: {},
        dataList: [],

        user:{},
                        
        
    })


    const {dataList,ordersList,ruleForm,gr,gresc,
                                                                                                                                                                    yonghuxingbieOptions,
                                        
                formInline,
        
        

    } = {...toRefs(state)};




    init();

        
        
        
    function init(){
        let sessionTable = Session.get("tableName")
        request({
            url: sessionTable + '/session',
            method: "get"
        }).then((
                data
        ) => {
            if (data && data.code === 0) {

            state.user = data.data;
            state.ruleForm=data.data;

        } else {
            notify(data.msg,{type:'error'});
        }
    });
    }



        
    const formRef=ref();
    // 提交
    function onSubmit() {
        let sessionTable = Session.get("tableName")
        formRef.value?.validate((valid)=>{

            if(!valid) return;

        request({
            url:`${sessionTable}/${!state.ruleForm.id ? "save" : "update"}`,
            method:'post',
            data:state.ruleForm
        }).then((data)=>{
            notify("操作成功",{type:'success'});

        emit("refresh");
    })
    })

    }
        
        

        
                    
                    
                    
                    
                    
                                                    state.yonghuxingbieOptions= "男,女".split(',')
                            
                    
        
function handleClick(tab:any){
    console.log(tab.props.name)
    if(tab.props.name){
        router.push(`/${tab.props.name}list`)
    }
}

                </script>



<template>
  <div class="bg-gray-60">
    <div class="container mx-auto px-4 py-8 max-w-7xl">



      <div class="">
    <div style="line-height: 50px;">
        <el-card class="box-card">
            <div slot="header" class="clearfix" style="text-align: center;">
                <span>个人中心</span>
            </div>

        </el-card>
        <div style="height: 50px;"></div>

        <el-tabs  tab-position="activeName" type="border-card" style="height: 800px;"  @tab-click="handleClick">
                
            

            
            


            

            

            
<el-tab-pane :label="item" v-for="(item,index) in gr" :name="gresc[index]">

            </el-tab-pane>


            <el-tab-pane label="修改个人信息">



                <div class="addEdit-block">
                    <el-form
                            ref="formRef" :model="ruleForm"
                            label-width="85px" label-right="right"
                            label-suffix=":" status-icon
                    >
                        <el-row>




                                                                                                                                                                                    


                                    <el-col :span="24">
                                        <el-form-item class="input" label="用户账号" prop="yonghuzhanghao"  :rules="{required: true, message: '用户账号为必填项！', trigger: 'blur'}" >
                                            <el-input v-model="ruleForm.yonghuzhanghao"
                                                      placeholder="用户账号" clearable></el-input>
                                        </el-form-item>
                                    </el-col>
                                                                                            


                                    <el-col :span="24">
                                        <el-form-item class="input" label="密码" prop="mima"  :rules="{required: true, message: '密码为必填项！', trigger: 'blur'}" >
                                            <el-input v-model="ruleForm.mima"
                                                      placeholder="密码" clearable></el-input>
                                        </el-form-item>
                                    </el-col>
                                                                                            


                                    <el-col :span="24">
                                        <el-form-item class="input" label="联系方式" prop="lianxifangshi"  :rules="{required: true, message: '联系方式为必填项！', trigger: 'blur'}" >
                                            <el-input v-model="ruleForm.lianxifangshi"
                                                      placeholder="联系方式" clearable></el-input>
                                        </el-form-item>
                                    </el-col>
                                                                                                                                <el-col :span="24">
                                        <el-form-item class="input" label="用户性别" prop="yonghuxingbie"  :rules="{required: true, message: '用户性别为必填项！', trigger: 'blur'}" >
                                            <el-select v-model="ruleForm.yonghuxingbie" placeholder="请选择用户性别">

                                                <el-option
                                                        v-for="(item,index) in yonghuxingbieOptions"
                                                        v-bind:key="index"
                                                        :label="item"
                                                        :value="item">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>

                                                                                            


                                    <el-col :span="24">
                                        <el-form-item class="input" label="用户姓名" prop="yonghuxingming"  :rules="{required: true, message: '用户姓名为必填项！', trigger: 'blur'}" >
                                            <el-input v-model="ruleForm.yonghuxingming"
                                                      placeholder="用户姓名" clearable></el-input>
                                        </el-form-item>
                                    </el-col>
                                                            

















                        </el-row>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>


        </el-tabs>
    </div>
      </div>
    </div>

    </div>
        
</template>
<style lang="scss" scoped>
    .avatar-uploader{
        border:1px solid #e4e6e9
    }

    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>
